<template>
  <!--vue-echarts提供全局组件-->
  <v-chart :option="getOptionsObj()" :autoresize="true"></v-chart>
</template>

<script setup lang="ts">
import { watch} from "vue";
let props = defineProps(["orderUserTrend"]);
//函数执行:返回图形图标的配置对象
const getOptionsObj = () => {
  return {
    xAxis: {
      type: "category",
      show: false,
    },
    yAxis: {
      show: false,
    },
    series: {
      type: "bar",
      data: props.orderUserTrend,
      //每一个柱状图的颜色
      itemStyle: {
        color: function (item) {
          let arr = [
            "red",
            "orange",
            "yellow",
            "blue",
            "cyan",
            "purple",
            "red",
            "orange",
            "yellow",
            "blue",
            "cyan",
            "purple",
            "hotpink",
            "yellow",
          ];
          return arr[item.dataIndex];
        },
      },
    },
    grid: {
      left: 10,
      top: 0,
      right: 0,
      bottom: 0,
      show: true,
      backgroundColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "skyblue", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "yellowgreen", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    tooltip: {
      position: function (point, params, dom, rect, size) {
        // 固定在顶部
        return [point[0], "10%"];
      },
      confine: true,
      //提示框提供十字准星指示器
      axisPointer: {
        type: "cross",
      },
    },
  };
};
//监听props变化:当前组件已经获取到服务器的数据
watch(props, () => {
  getOptionsObj();
});
</script>

<style scoped>
</style>